<template>
	<view class="page">
		<!-- 首页海报分享 -->
		<image :src="img" mode="scaleToFill" class="image_canvas" ></image>
		 <r-canvas ref="rCanvas"></r-canvas>
		 <!-- #ifdef  MP-WEIXIN -->
		 <view class="message" v-if='message'>
		   {{message}}
		 </view>
		 <!--#endif -->
		<u-popup v-model="popup.visible" mode='bottom' width="400rpx" height="auto" >
			<view class="share_pop">
				<view class="icon" @click="popup.visible = false">
					<n-icon name="close" size="44"  color='#A7Abba'></n-icon>
				</view>
				<view class="row" @click="onShare(2)">
					<image src="https://xiaoqu.wuguoxin.vip/uploads/web/wechatMoments01.png" mode="scaleToFill"></image>
					<text>分享到朋友圈</text>
				</view>
				<view class="row" @click="onShare(1)">
					<image src="https://xiaoqu.wuguoxin.vip/uploads/web/weixin03.png" mode="scaleToFill"></image>
					<text>分享到微信</text>
				</view>
				<view class="row" @click="onSave()">
					<image src="https://xiaoqu.wuguoxin.vip/uploads/web/tihuantu.png" mode="scaleToFill"></image>
					<text>保存到相册</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import rCanvas from "@/components/r-canvas/r-canvas.vue"
	import {setAddShare} from "@/utils/postRequest.js"
	import {getCardSharing} from './static/api.js'
	import uPopup from '@/components/u-popup.vue'
	export default {
		components:{uPopup,rCanvas},
		data(){
			return{
				id:null,
				duan_type:1,
				popup:{
					visible:false,
				},
				img: '',
				message: '',
				imageWidth: 300,
				imageHeight: 300,
				info:{
					top:'我发现了一个非常有用的文章，你也快来看看吧~',
					center_img:"https://img1.baidu.com/it/u=3660630395,1417882612&fm=26&fmt=auto",
					center:'北京图装科技有限公司成立于2001年11月，是一家非银行金融机构，本部位于北京，另在武汉设立分公司。',
					bottom_top:'图装小程序',
					bottom_bottom:'长按进入小程序查看更多内容',
					code:''
				},
				userInfo:{}
			}
		},
		async onReady(){
		  uni.showLoading()
		  await this.getCode()
		  this.$nextTick(async () => {
		    // 初始化
		    await this.$refs.rCanvas.init({
		      canvas_id: "rCanvas",
		      hidden:true,
		      canvas_width:640,//canvas width px
		      canvas_height:952, //canvas height px
		    })
		    await this.$refs.rCanvas.setCanvasHeight(952)
		    await this.$refs.rCanvas.setCanvasWidth(640)
		    await this.$refs.rCanvas.drawImage({
		      // url:'https://img2.baidu.com/it/u=622902245,3661794572&fm=26&fmt=auto' ,
			url: this.userInfo.avatar,
		      x: 34,
		      y: 44,
		      w: 60,
		      h: 60,
			  border_radius:30
		    })
			await this.$refs.rCanvas.drawText({
				text:this.userInfo.name,
				max_width:450,
				x:114,
				y:80,
				font_color:"#121212",
				font_size:28,
				line_clamp:1,
				line_clamp_hint:'……',
			})
			await this.$refs.rCanvas.drawText({
				text:this.info.top,
				max_width:572,
				line_height:44,
				line_clamp:2,
				line_clamp_hint:'……',
				x:34,
				y:174,
				font_color:"#121212",
				font_size:32,
			})
			await this.$refs.rCanvas.drawImage({
		      url: this.info.center_img,
		      x: 0,
		      y: 274,
		      w: 640,
		      h: 296,
		    })
			await this.$refs.rCanvas.drawText({
				text:this.info.center,
				max_width:572,
				line_height:34,
				line_clamp:2,
				line_clamp_hint:'……',
				x:22,
				y:620,
				font_color:"#888888",
				font_size:24,
			})
			await this.$refs.rCanvas.drawRect({
				w:572,
				h:2,
				x:35,
				y:704,
				color:"#f6f7fb",
			})
			await this.$refs.rCanvas.drawImage({
			  // url: 'https://img0.baidu.com/it/u=1101876243,3028731752&fm=26&fmt=auto',
			  url: this.info.code,
			  x: 44,
			  y: 750,
			  w: 128,
			  h: 128,
			  // border_radius:64
			})
		    await this.$refs.rCanvas.drawText({
		    	text:this.info.bottom_top,
		    	max_width:400,
		    	line_height:40,
		    	line_clamp:1,
		    	line_clamp_hint:'……',
		    	x:207,
		    	y:804,
		    	font_color:"#000000",
		    	font_size:28,
		    })
			await this.$refs.rCanvas.drawText({
				text:this.info.bottom_bottom,
				max_width:400,
				line_height:28,
				line_clamp:1,
				line_clamp_hint:'……',
				x:207,
				y:850,
				font_color:"#A4A4A4",
				font_size:20,
			})
		    await this.$refs.rCanvas.ctx
		    // 生成海报
		    await this.$refs.rCanvas.draw((res) => {
		      this.img = res.tempFilePath
			  uni.hideLoading()
			   // #ifdef   MP-WEIXIN
		      this.onSave()
			   // #endif 
			  //  #ifdef APP-PLUS
			   this.popup.visible = true
			    // #endif 
		    })
		  })
		  		
		},
		
		methods:{
			onShare(type){
				uni.share({
				    provider: "weixin",
				    scene: type == 1 ? "WXSceneSession" :'WXSceneTimeline',
				    type: 5,
					miniProgram:{
						id:this.$global.originalId,
						path:`/pagesHome/richTextDetails?id=${this.id}&invitation_code=${this.$store.state.userInfo ? this.$store.state.userInfo.invitation_code : ''}`,
						type:this.$global.environment == 'development' ? 2 : 0,
						webUrl:"https://www.baidu.com"
					},
				    title: '图装',
				    imageUrl:this.$global.shareImg,
				    success:  (res) =>{
						setAddShare({id:this.id,type:5,isErr:false}).then(()=>{
							this.$global.$editUploadBack(1,`richTextDetails?id=${_this.id}&count=1`)
						})
				    },
				    fail: function (err) {
						// console.log(JSON.stringify(err))
				    }
				});
			},
			onSave() {
			  var _this = this
			  //#ifndef H5
			  uni.saveImageToPhotosAlbum({
			    filePath: _this.img,
			    success:(res)=> {
			      _this.message = '已为您保存到相册，快去分享吧~'
				  this.popup.visible = false
			      uni.showToast({
			        title: "已为您保存到相册，快去分享吧~",
			        duration: 2000,
			        icon: "none"
			      })
				   setAddShare({id:_this.id,type:5,isErr:false}).then(()=>{
					   _this.$global.$editUploadBack(1,`richTextDetails?id=${_this.id}&count=1`)
				   })
			    },
			    fail() {
					this.popup.visible = false
			      _this.message = ''
			      uni.showToast({
			        title: "保存失败",
			        duration: 2000,
			        icon: "none"
			      })
			      // uni.hideLoading()
			    }
			  })
			  
			  // #endif
			},
			async getCode() {
			  try{
				  var res =  await getCardSharing()
				  this.info.code = res
			  }catch{
				  uni.hideLoading()
			  }
			}
		},
		onLoad(params){
			this.id = params.id
			this.userInfo = this.$store.state.userInfo
			//#ifdef APP-PLUS
			this.duan_type = 1 
			//#endif
			//#ifdef MP-WEIXIN
			this.duan_type = 2
			//#endif
		}
	}
</script>

<style scoped lang="scss">
	.page{
		padding: 100rpx 55rpx 50px;
		background: #ffffff;
		.image_canvas{
			width: 640rpx;
			height: 952rpx;
			background: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0px 6rpx 12rpx 0px rgba(173,173,173,0.16); 
		}
	}
	.message{
	  color:#D5D5D5;
	  font-size: 24rpx;
	  line-height: 34rpx;
	  margin-top: 84rpx;
	  text-align: center;
	}
	// 分享相关
	.share_pop{
		width: 750rpx;
		background-color: #fff;
		height: 400rpx;
		display: flex;
		position: relative;
		.icon{
			position: absolute;
			right: 26rpx;
			top:26rpx;
		}
		.row{
			flex:1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 32rpx;
			}
			text{
				font-size: 28rpx;
				height: 44rpx;
				color:$theme;
			}
		}
	}
</style>
